import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import PropTypes from 'prop-types';
import {getRealSize} from '../utils';
import {Picker} from '@react-native-picker/picker';

export default class PickerItem extends React.Component {
  static propsTypes = {
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string.isRequired,
    items: PropTypes.array.isRequired,
    isRequire: PropTypes.bool,
    placeholder: PropTypes.string,
  };
  static defaultProps = {
    onChange: () => {},
    value: null,
    isRequire: false,
    placeholder: '',
    items: [],
  };

  state = {
    show: false,
  };

  onChange = (itemValue, index) => {
    this.props.onChange(itemValue);
  };

  render() {
    const {isRequire, value, placeholder, items} = this.props;
    items.unshift({label: placeholder, value: ''});
    return (
      <View style={Style.container}>
        <Picker
          style={Style.picker}
          selectedValue={value || ''}
          onValueChange={this.onChange}>
          {items.map(item => (
            <Picker.Item
              label={item.label}
              value={item.value}
              key={item.value}
            />
          ))}
        </Picker>
        <View style={Style.icon}>
          {isRequire && <Text style={Style.require}>*</Text>}
        </View>
      </View>
    );
  }
}

const Style = StyleSheet.create({
  container: {
    borderColor: '#E8E8E8',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: getRealSize(4),
    backgroundColor: '#f6f6f6',
    paddingHorizontal: getRealSize(10),
    height: getRealSize(44),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  picker: {
    flex: 1,
    fontSize: getRealSize(13),
    fontWeight: '400',
    color: '#999',
    // width: getRealSize(288),
  },
  require: {
    color: 'red',
    marginTop: getRealSize(4),
    marginLeft: getRealSize(4),
  },
  icon: {
    width: getRealSize(14),
    height: getRealSize(14),
  },
});
